<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/index.css">
<script src="js/axios.min.js"></script>
<body>
<div id="app">
    <el-form :inline="true" :model="stduentSearchForm" class="demo-form-inline">
        <el-form-item label="学生姓名">
            <el-input v-model="stduentSearchForm.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
            <el-button type="primary" @click="initTable">搜索</el-button>
            <el-button type="danger" @click="batchDelete">批量删除</el-button>
        <el-button type="success" @click="savestudent" >添加</el-button>
        </el-form-item>
    </el-form>


    <el-table
            :data="student"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
    >
        <!--el-table-column:表格的列  -->
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="sid"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="cid"
                label="班级编号">
        </el-table-column>
        <el-table-column
                prop="aclass.cname"
                label="班级名称">
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button type="success" size="small" icon="el-icon-edit" @click="editstudent(scope.row)">编辑</el-button>
                <el-button type="danger" size="small"  icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!--分页组件的开始
         @size-change:
         @current-change:
         page-sizes:[]
         :current-page=当前页码
         :page-size默认每页显示的条数
         :total 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--编辑的对话框-->
    <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="editstudentFrom" label-width="80px" >
            <el-form-item label="学生姓名">
                <el-input v-model="editstudentFrom.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editstudentFrom.age"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
                <el-select v-model="editstudentFrom.cid " placeholder="请选择">
                    <el-option v-for="item in aclass"
                               :key="item.cid"
                               :label="item.cname"
                               :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="updatestudent">确认修改</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加的对话框-->
    <el-dialog
            title="添加"
            :visible.sync="tianjia"
            width="30%"
    >
        <el-form ref="form" :model="savestudentFrom" label-width="80px" >
            <el-form-item label="学生姓名">
                <el-input v-model="savestudentFrom.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="savestudentFrom.age"></el-input>
            </el-form-item>
            <el-form-item label="班级编号">
                <el-input v-model="savestudentFrom.cid"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
                <el-select v-model="savestudentFrom.cid " placeholder="请选择">
                    <el-option v-for="item in aclass"
                               :key="item.cid"
                               :label="item.cname"
                               :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="insertstudent">确认添加</el-button>
                <el-button @click="tianjia=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

</div>
</body>
<script>
    let  app=new Vue({
        el:"#app",
        data: {
            stduentSearchForm:{},
            student: [],
            //所有班级
            aclass:[],
            currentPage:1,
            pageSize:5,
            total:0,
            //编辑对话框的显示和隐藏
            dialogVisible:false,
            //编辑员工
            editstudentFrom:{},
            //表格的选中项
            multipleSelection: [],
            //声明被选中的id
            ids:[],
            //添加员工
            savestudentFrom:{},
            //编辑对话框的显示和隐藏
            tianjia:false,


        },
         created(){
            this.initTable()
             //查询所有班级
             this.loadAllClass();
         },

            methods:{
                //添加
                insertstudent(){
                    axios.put("http://localhost:8080/student/save",this.savestudentFrom).then(result=>{
                        if(result.data.code===200){
                            this.$message.success("添加成功");
                            //关闭对话框
                            this.tianjia=false;
                            //刷新页面
                            this.initTable();
                        }
                    });
                },
                //批量删除
                batchDelete(){
                    axios.post("http://localhost:8080/student/batchDelete",this.multipleSelection).then(result=>{
                        if(result.data.code===200){
                            this.$message.success(result.data.msg);
                            //刷新页面
                            this.initTable();
                        }
                    })
                },

                //查询班级表
                loadAllClass(){
                    axios.get("http://localhost:8080/class/list").then(result=>{
                        this.aclass=result.data.data;
                    })
                },
                //获取表格被选中的项
                handleSelectionChange(val){
                    this.multipleSelection = val;
                },
                //确认修改员工信息
                updatestudent(){
                    axios.put("http://localhost:8080/student/update",this.editstudentFrom).then(result=>{
                        if(result.data.code===200){
                            this.$message.success("修改成功");
                            //关闭对话框
                            this.dialogVisible=false;
                            //刷新页面
                            this.initTable();
                        }
                    });
                },


                initTable() {
                    axios.post("http://localhost:8080/student/list/"+this.currentPage+"/"+this.pageSize, this.stduentSearchForm).then(result => {
                        this.student = result.data.data.records;
                        this.total=result.data.data.total
                    })
            },
                //改变每页的条数时触发该方法
                handleSizeChange(val) {
                    this.pageSize=val;
                    this.initTable();
                },
                //改变当前页码时触发的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.initTable();
                },
                //删除数据
                del(row){
                    let sid=row.sid;
                    axios.delete("http://localhost:8080/student/delete/"+sid).then(result=>{
                        if(result.data.code===200){
                            this.$message.success("删除成功") //弹出成功的消息框
                            this.initTable(); //重新加载表格
                        }
                    })
                },//编辑员工
                editstudent(row){
                    this.dialogVisible=true;
                    this.editstudentFrom=row; //根据id查询该员工的信息
                },
                //添加
                savestudent(){
                    this.tianjia=true;

                }
                }



    })
</script>
</html>